body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-family: '微软雅黑', Arial, Helvetica, sans-serif;font-size:14px;font-size-adjust: 1; }
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;border:none;}
textarea{resize:none;}
a{text-decoration:none;color: #ffffff}
p{cursor: default}
header {
    background-color: #000000;
    height: 61px;
    width:100%;
    padding: 0px;
    margin: 0px;
}
header > nav {
    width: 550px;
    height: inherit;
    margin: 0 auto;
    display: flex;
}
header > nav > .logo{
    flex: 3;
}
header > nav > .ltem {
    color: aliceblue;
    align-self: center;
    flex: 3;
}
.ltem > li {
    font-size: 18px;
    display: inline-block;
}
.ltem > li~li{
    margin-left: 30px;
}
/*第二个图片展示*/
.banner {
    position: relative;
}
.banner_lg {
    background: url(../images/banner_pl.png) no-repeat;
    width: 100%;
    height: 638px;
    max-height: 638px;
    z-index: 1;
}
.banner_fw {
    background: url(../images/banner.png) no-repeat;
    position: absolute;
    bottom:0px;
    /*left: 290px;*/
    left:20%;
    width: 664px;
    height: 584px;
    z-index: 2;
    animation: bg 2s linear 1 normal forwards;
}

.banner_z{
    background: url(../images/banner_z.png) no-repeat;
    position: absolute;
    top:130px;
    /*left:740px;*/
    left:50%;
    width: 234px;
    height: 234px;
    opacity: 1;
    z-index: 3;
    /**/
    text-align: center;
    vertical-align: middle;
    line-height: 250px;

    animation: bannerleft 5s ease 1 normal forwards;
}
.b_z {
    color: #ED2323;
    font-size: 300%;
    font-weight: 900;
    animation: bg 7s linear 1 normal forwards;
}
.banner_find {
    position: absolute;
    top:50px;
    /*left:710px;*/
    left:47%;
    z-index: 5;
    width: 365px;
    height: 60px;
    font-family: '微软雅黑', Arial, Helvetica, sans-serif;
    font-size-adjust: 1;
    font-weight: bolder;
    font-size: 400%;
    color: #333333;
    animation: bannerleft 3s linear 1 normal forwards;
}
.banner_red {
    color: #EE2323;
    position: absolute;
    top:375px;
    /*left:710px;*/
    left:47%;
    width: 265px;
    font-weight: 700;
    font-size: 120%;
    text-align-last:end;
    z-index: 5;
    animation: bannerright 6s ease 1 normal forwards;
}
.banner_btn {
    background-color: #ED2323;
    position: absolute;
    bottom:20px;
    /*left:740px;*/
    left:52%;
    z-index: 5;
    width: 200px;
    height: 60px;
    border:0px;
    color: #ffffff;
    font-family: monospace;
    font-size: 150%;
    text-shadow: 2px 2px 30px #333333;
    box-shadow: 5px 5px 20px #333333;
    border-radius: 10px;
    cursor: pointer;
    animation: bannerleft 7s ease 1 normal forwards;
    transition: all linear 0.3s;
}
.banner_btn:hover {
    transform: scale(1.1);
    background-color: darkcyan;
}
@keyframes bg {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 0.01;
    }
    70%{
        opacity: 0.3;
    }
    100%{
        opacity: 1;
    }
}
@keyframes bannerleft {
    0%{
        left:0;
        opacity: 0;
    }
    30%{
        left:5%;
        opacity: 0.03;
    }

    100%{
        opacity: 1;
    }

}
@keyframes bannerright {
    0%{
        left:100%;
        opacity: 0;
    }
    50%{
        left:100%;
        opacity: 0.01;
    }
    70%{
        left:80%;
        opacity: 0.3;
    }
    100%{
        opacity: 1;
    }
}
@media screen and (max-width: 768px){
    header > nav {
        width: 100%;
        height: inherit;
        margin: 0 auto;
        display: flex;
    }
    header > nav > .logo{
        flex: 2;
    }
    header > nav > .ltem {
        color: aliceblue;
        align-self: center;
        flex: 3;
    }
    .banner_fw {
        left: 14%;
    }
    .banner_z{
        left: 40%;
    }
    .banner_find {
        left: 20%;
    }
    .banner_red {
        left: 40%;
    }
    .banner_btn {
        left: 50%;
    }
}
@media screen and (max-device-width: 767px){
    header > nav {
        width: 100%;
        height: inherit;
        margin: 0 auto;
        display: flex;
    }
    header > nav > .logo{
        flex: 2;
    }
    header > nav > .ltem {
        color: aliceblue;
        align-self: center;
        flex: 4;
    }
    .ltem > li~li{
        margin-left: 10px;
    }
    .banner_fw {
        left: 0;
    }
    .banner_z{
        left: 0;
    }
    .banner_find {
        left: 0;
        font-size: 300%;
    }
    .banner_red {
        left: 0;
    }
    .banner_btn {
        left: 0;
    }
}
/*about块*/
.about {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px ;
    margin-bottom: 40px ;
}
.about_us {
    font-size: 200%;
    display: block;
    width: 130px;
    margin: 0 auto;

}
.about_img_top {
    width: 100%;
    overflow: hidden;
    margin-top: 30px;
}
.about_img {
    width: inherit;
}
.about_content {
    margin-top: 10px;
    line-height: 24px;
    color: #333333;
    text-align: justify;
}
.about_btn_top {
    text-align: center;
}
.about_btn {
    width: 325px;
    height: 60px;
    border:0px;
    color: #ffffff;
    font-family: monospace;
    font-size: 150%;
    text-shadow: 2px 2px 30px #333333;
    box-shadow: 0px 0px 5px #333333;
    border-radius: 10px;
    cursor: pointer;
    background-color: #1F2325;
    margin-top: 20px;
    transition: all linear 0.5s;
}
.about_btn:hover {
    transform: scale(1.05);
    background-color: #000000;
}
@media screen and (max-width: 768px) {
    .about {
        width: 100%;
    }
}
@media screen and (max-device-width: 768px){
    .about {
        width: 100%;
    }
}
/*//case*/
.case {
    width: 100%;
    padding-top: 30px ;
    padding-bottom: 30px;
    background-color: #F6F6F6;
}
.case_header {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}
.case_us {
    font-size: 200%;
    display: block;
    width: 250px;
    margin: 0 auto;
}
.case_content {
    margin-top: 30px;
    line-height: 24px;
    color: #333333;
    margin-bottom: 20px;
}
.case_box_top {
    /*display: flex;*/
}
.case_box {
    border: 20px solid #F6F6F6;
    /*flex: 1;*/
    width: 25%;
    float: left;
    box-sizing:border-box;
}
.box_img {
    width: 100%;
    cursor: pointer;
    transition: all linear 0.6s;
}
.box_img:hover{
     transform: scale(1.05);
 }
.box_header {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 130%;
}
.box_content {
    width: 90%;
    margin: 0 auto;
    color: #333333;
    line-height: 28px;
    margin-bottom: 20px;
    height: 84px;
    text-align: justify;
    /*white-space:nowrap;overflow:hidden;text-overflow:ellipsis;单行省略*/

    /*多行省略*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;

}
.case_btn_top {
    text-align: center;
    margin-top: 10px;
}
.case_btn {
    width: 325px;
    height: 60px;
    border:0px;
    color: #ffffff;
    font-family: monospace;
    font-size: 150%;
    text-shadow: 2px 2px 30px #333333;
    box-shadow: 0px 0px 5px #333333;
    border-radius: 10px;
    cursor: pointer;
    background-color: #1F2325;
    transition: all linear 0.5s;
}
.case_btn:hover {
    transform: scale(1.05);
    background-color: #000000;
    color: coral;
}
@media screen and (max-width: 768px) {
    .case_box_top {
        display: inline-block;
        width: 100%;

    }
    .case_box {
        border: 20px solid #ffffff;
        width: 50%;
        border-bottom: 1px solid #dddddd;
    }
}
@media screen and (max-width: 468px) {
    .case_box_top {
        display: inline-block;
        width: 100%;

    }
    .case_box {
        border: 20px solid #ffffff;
        width: 100%;
        border-bottom: 1px solid #dddddd;
    }
}
@media screen and (max-device-width: 768px){
    .case_box_top :after{
        display: inline-block;
        width: 100%;
    }
    .case_box {
        border: 20px solid #ffffff;
        width: 100%;
    }
}

/*work*/
.work {
    width: 100%;
    padding-top: 60px ;
    padding-bottom: 40px;
    overflow: hidden;
}
.work_content {
    width: 85%;
    margin: 0 auto;
    display: flex;
}
.work_box {
    flex: 1;
    text-align: center;
}
.work_box ~ .work_box {
    box-shadow: -8px 1px 10px #dddddd;
}
.work_img {

}
.work_btn_top {
    text-align: center;
    margin-top: 60px;
}

/*footer*/
footer {
    background-color: #222729;
    height: 800px;
    display: -moz-box;
    display: -webkit-box;
    -moz-box-pack: center;
    -webkit-box-pack: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    /*div居中*/
}
.footer_content{
    width: 500px;
    height: 600px;
}

.footer_header {
    width: inherit;
    text-align: center;
}
.f_h_1 {
    color: #F6F6F6;
    font-size: 200%;
    margin-bottom: 20px;
}
.f_h_2 {
    color: #41474B;
    margin-bottom: 20px;
}
.footer_form input,textarea{
    border-radius: 10px;
    margin-left: 0px;
    margin-right: 0px;
    height: 50px;
    border: 5px solid #222729;
    padding-left: 10px;
}
.i{
    display: flex;
}
.i_1 {
    flex:1;
    background-color: #41474B;
    box-sizing: border-box;
    display: inline-block;
}
.i_2 {
    flex:1;
    background-color: #41474B;
    box-sizing: border-box;

}
.i_3 {
    width: 100%;
    background-color: #41474B;
    box-sizing: border-box;
}
.i_4 {
    width: 100%;
    background-color: #41474B;
    box-sizing: border-box;
    height: 200px;
}
.footer_footer {
     text-align: center;
 }
.footer_footer > li{
    height: 40px;
}
.fhr {
    color: #41474B;
    border-color: #41474B;
    line-height: 30px;
}
@media screen and (max-width: 768px) {
    .work_content {
        width: 100%;
    }
    .footer_content{
        width: 100%;
        height: 600px;
    }
}
@media screen and (max-device-width: 768px){
    .work_content {
        width: 100%;
    }
    .footer_content{
        width: 100%;
        height: 600px;
    }
}

